<!--
 * @Author: wushikang
 * @Date: 2021-10-24 11:38:38
 * @LastEditors: wushikang
 * @LastEditTime: 2021-10-25 15:21:45
 * @Description: 
-->
<template>
    <div class="main">
<!-- 按钮区域 -->
    <div class="btns">
      <el-form
        :inline="true"
        size="small"
        :model="queryParams"
        class="demo-form-inline"
      >
        <el-form-item style="margin-right: 10px">
          <el-button type="primary"  size="mini" @click="toAddHandler">添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.username"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="正常" value="正常"></el-option>
            <el-option label="禁止" value="禁止"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  size="mini" @click="pageQueryEmployee"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
      <div class="form">
     <el-table
    :data="employee.list"
    stripe
    style="width: 100%"
    size="mini"
    >
    <el-table-column
       type="index"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="realname"
      label="姓名">
    </el-table-column>
   <el-table-column
      prop="telephone"
      label="手机号">
    </el-table-column>
 <el-table-column
     
      label="性别">
      <template v-slot="scope">
        {{scope.row.gender|Sex(scope.row.gender)}}
      </template>
    </el-table-column>
     <el-table-column
      label="状态"
      >
    <template v-slot="scope">
          <el-tag
            v-if="scope.row.status == '正常'"
            type="success"
            size="mini"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag v-else type="danger" size="mini">{{
            scope.row.status
          }}</el-tag>
        </template>
    </el-table-column>
     <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" width:
          @click="toEditHandler(scope.row)"
            ></el-button
          >
          <el-button
            type="info" icon="el-icon-message" size="mini"
            @click="employeeUser(scope.row, $event)"
            ></el-button
          >
          <el-button
            type="danger" icon="el-icon-delete" size="mini"
            @click="deleteBaseEmployee(scope.row.id)"
            ></el-button
          >
        </template>
      </el-table-column>
    </el-table>
        <!-- 分页插件区域 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="employee.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="employee.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="employee.total"
        size="mini"
      >
      </el-pagination>
      <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="visible">
      <el-form :model="employeeData"   ref="employeeDataForm" :rules="rules">

        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="employeeData.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="realname">
          <el-input
            v-model="employeeData.realname"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
       <el-form-item label="手机号" :label-width="formLabelWidth" prop="telephone">
          <el-input
            v-model="employeeData.telephone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
           <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password"
            v-model="employeeData.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
           <el-radio v-model="employeeData.gender" label="male">男</el-radio>
           <el-radio v-model="employeeData.gender" label="female">女</el-radio>
        </el-form-item>

      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary"  @click="toSaveHandler">确 定</el-button>
      </div>
    </el-dialog>

      </div>
    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
import qs from "qs";
import _ from "lodash";
import request from "@/utils/request";
    export default {
        props:{
         roleIds:{
              type:[Number,String],
              //  required:true,
              default:"",
           },
          titles:{
             type:[String],
              //  required:true,
              default:"",
          }
        },
        data(){
            return{
              employeeData:{
                    
               },
                queryParams: {
                    page: 1,
                    pageSize: 5,
                    roleId:this.roleIds
                },
               visible: false,
               formLabelWidth: "80px",
               title:'',
               rules:{
                username:[{
                  requied:true,message:'请输入用户名称',trigger:"blur"}],
                realname:[{
                  required:true,message:'请输入姓名',trigger:'blur'
                }],
                telephone:[{
                  required:true,message:'请输入电话',trigger:'blur'
                }],
                password:[{
                  required:true,message:'请输入密码',trigger:'blur'
                }],
                 gender:[{
                  required:true,message:'请选择性别',trigger:'change'
                }]
              }
            }
        },
        methods:{
           ...mapActions('manage',["findAllBaseUser"]),
             // 分页size-change事件
          handleSizeChange(pageSize) {
            // 点击分页容量，将最新的pageSize设置到数据模型中
            this.queryParams.pageSize = pageSize;
            // 重新调用分页查询的方法，做数据重载
            this.findAllBaseUser(this.queryParams);
          },
          // 分页current-page-change事件
          handleCurrentChange(page) {
            this.queryParams.page = page;
            this.findAllBaseUser(this.queryParams);
          },
         // 添加按钮点击事件
          toAddHandler() {
            this.employeeData={};
            this.title = "新增"+this.titles+"信息";
            this.visible = true; // 打开模态框
          },
          // 表单提交的确认按钮点击事件
          toSaveHandler() {
            this.employeeData.roleId=this.roleIds;
            let data = qs.stringify(this.employeeData);
            if(this.title=="新增"+this.titles+"信息"){
              request.post("/baseUser/addUserWidthRole", data).then((res) => {
              // 数据重载
              this.findAllBaseUser(this.queryParams);
              // 关闭模态框
              this.visible = false;
              // 提示成功操作的信息
              this.$message.success(res.message);
            });
            }else if(this.title=="修改"+this.titles+"信息"){
             request.post("/baseUser/saveOrUpdate", data).then((res) => {
              // 数据重载
              this.findAllBaseUser(this.queryParams);
              // 关闭模态框
              this.visible = false;
              // 提示成功操作的信息
              this.$message.success(res.message);
            });
            }

          },
          pageQueryEmployee(){
           // 过滤查询参数，将空字符串的键值对删除掉
            for (let key in this.queryParams) {
              if (this.queryParams[key] == "") {
                delete this.queryParams[key];
              }
            }
            this.findAllBaseUser(this.queryParams);
          },
          //修改用户信息
          toEditHandler(row){
              this.title = "修改"+this.titles+"信息";
              this.employeeData = _.clone(row); // 将当前行数据显示深拷贝后，显示到表单里面去
              this.visible = true; // 打开模态框
          },
         employeeUser(row){
             this.$router.push({
              //要跳转的路劲
              path: "/people/index",
              //要传递的参数
              query: row,
          });
          },
          //删除用户信息
          deleteBaseEmployee(id){
               this.$confirm("此操作将该"+this.titles+"信息删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
            request.get('/baseUser/deleteById',{  params:{
                id,
            }}).then((res) => {
                // 重载数据
                this.findAllBaseUser(this.queryParams);
                // 提示成功操作的信息
                this.$message({
                  message: res.message,
                  type: "success",
                });
              });
          });
          }
        },
        computed:{
             ...mapState("manage",["employee"]),
        },
        created(){
            this.findAllBaseUser(this.queryParams);
        },
    }
</script>

<style lang="scss" scoped>

</style>